<template>
  <div class="cart">
    <div class="top">
      <div class="top1">
        <h2>购物车{{ totalNum }}</h2>
        <p @click="showDel">{{ manage }}</p>
      </div>
      <p>共{{ totalNum }}件宝贝</p>
    </div>
    <div class="content" >
      <CartSon v-for="(v, index) in list" :key="index" ref="ref1" :originprice="v.originprice" :proname="v.proname" :img1="v.img1" :num="v.num" :id="index" 
       :list="list" :flag="v.flag"></CartSon>
    </div>
    <div class="bottom">
          <SubmitBar :isFull="fullState"  :sum="goodsTotal"  :total="totalNum" :list="list" @isChecked="getState" @del="del"></SubmitBar>
          <TabBar2 :cart="cart" :my="my" current="1"></TabBar2>

    </div>
  </div>

</template>

<script>
import CartSon from '../Cart/CartSon.vue'
import TabBar2 from '../Repeat/TabBar2.vue'
import Couter from '../Cart/Counter.vue'
import SubmitBar from '../Cart/SubmitBar.vue'
export default {
  data() {
    return {
      cart: "https://img.alicdn.com/imgextra/i4/O1CN01ObHTOR1eBYqyxZmvV_!!6000000003833-2-tps-63-63.png",
      my: "https://img.alicdn.com/imgextra/i3/O1CN01nOAkIZ1ou7XqRzXEZ_!!6000000005284-2-tps-63-63.png",
      // 复选框
      checked: false,
      originprice: 60,
      proname: "Dior迪奥口红999哑光720丝绒888滋润772显白 复古520高级送礼专属",
      img1: '//gw.alicdn.com/bao/uploaded/i2/2965419761/O1CN01fkWHyW2LyaoD97OgD_!!0-item_pic.jpg_Q75.jpg_.webp',
      // 加减
      num: 1,
      index: 0,
      list: [],
      // 点击删除保留index
      cur: 0,
      token: '',
      userid: '',
      arrPre: {},
      flagDel:false,
      manage:"管理"


    }
  },
  created() {
   
  },
  async mounted() {
    //查看购物车
    const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/list', {
      // token: localStorage.getItem("token"),
      userid: "user_075616fe-8528-43e9-ba98-9dd0c4db8873",
    });
    this.list = res.data

  },

  methods: {
    showDel() {
      if (!this.flagDel) {
        this.flagDel = true
        this.$bus.$emit('del', this.flagDel)
        this.manage = "完成"
      } else {
        this.flagDel = false
        this.$bus.$emit('del', this.flagDel)
        this.manage = "管理"
     }
    }
    
    ,
    // 自定义事件，v是默认的数据，即子组件选中状态，全选
    getState(v) {
      this.list.forEach(item => item.flag = v)
    },
  async  del(v) {
      this.list = v
      // 更新数据
    const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/updatenum', {
      token: localStorage.getItem("token"),
      num: 0
    })

    }
    
  },
  computed: {
    fullState() {
      return this.list.every(item => item.flag == true)
    },
    //    计算接口中已经选中的商品总价格，规范先属性，后指令
    goodsTotal() {
      // 一定要有return
      return this.list.filter(item => item.flag==true).reduce((total, item) => total += item.originprice * item.num, 0)

    },
    // 计算选中的总数量
    totalNum() {
      const result = this.list.filter(item => item.flag==true).reduce((total, item) => total += item.num, 0)
      return `结算(${result}件)`
    }
  }
  ,
  components: {
    Couter,
    SubmitBar,
    TabBar2,
    CartSon,

  },

}
</script>

<style lang="scss" scoped>
.top {
  width: 7.5rem;
  margin: auto;
  background: linear-gradient(-90deg, #FF5000 0%, #FF8400 100%);
  color: #fff;
}

.top1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 0 .2rem 0;
  width: 7.02rem;
  height: .44rem;
  margin: auto;
  position: relative;

  h2 {
    font-size: .4rem;
  }

  p {
    font-size: .3rem;
  }
}

.top>p {
  width: 7.02rem;
  height: 2.4rem;
  font-size: .24rem;
  padding-left: .24rem;
  margin-top: .1rem
}

.content {
  width: 7.02rem;
  margin: auto;
  margin-top: -1.94rem;
  // position: absolute;
  // top:1.94rem;
  // left: .24rem;

}

// Cartson
.cartSon {
  margin: auto;
  width: 7.02rem;
  background: #fff;
  font-size: .28rem;
  color: #333;
  border-radius: .24rem .24rem 0 0;
}

.cartSon .top {
  width: 3.82rem;
  height: .8rem;
  line-height: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 .24rem;

  img {
    width: .36rem;
    height: .36rem;
  }

  p {
    width: 2.24rem;
  }
}

// 商品
.goods {
  box-sizing: border-box;
  margin: auto;
  width: 7.02rem;
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: space-around;
}

.goods>input {
  width: 1rem;
  border-radius: 100%;

}

::v-deep .van-card {
  flex: 1;
  padding: .16rem 0;
  background-color: #fff;
  height: 2.84rem;

}

.van-cell__value--alone img {
  width: .24rem;
  height: .24rem;
}

/* pic大小 */
.van-card__thumb {
  width: 1.8rem;
  margin-left: .40rem;

}

.van-card__content,
.van-card__content>div {
  align-self: flex-end;
  width: 3.84rem;
  height: 2.96rem;
  // margin-left:.08rem;
  font-size: .28rem;
  color: #333;
}

.van-card__bottom .van-card__price {
  position: absolute;
  top: 1.34rem;
  font-size: .28rem;
  color: #ff5000;
}

.van-card__desc {
  margin-top: .16rem;
  color: #ff5000;
}

.goods .van-checkbox {
  width: .9rem;
  text-align: center;
  margin-left: .40rem;
  overflow: visible;
}

/* 步进器 */
.van-stepper {
  width: 1.84rem;
  position: absolute;
  right: .16rem;
  bottom: 0;
}

::v-deep .van-submit-bar {
  bottom: 0.8rem;
  width: 7.5rem;
}
.bottom{
  height: 2rem;
}
</style>